
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="icon" href="../../favicon.ico"> -->

    <title>首页</title>

    <!-- Bootstrap core CSS -->
    <link href="./css/bootstrap-theme.css" rel="stylesheet">
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./lib/swiper/swiper.min.css" rel="stylesheet" >
    <link rel="stylesheet" href="./lib/swiper/certify.css">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <!-- <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> -->

    <!-- Custom styles for this template -->
    <!-- <link href="jumbotron.css" rel="stylesheet"> -->
    <link href="./css/common.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">
    <link href="./css/media.css" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- <script src="../../assets/js/ie-emulation-modes-warning.js"></script> -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body class="index star page">
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img class="logo" src="./images/logo.png" alt="...">
          </a>
          <!-- <button type="button" class="navbar-toggle " data-toggle="collapse"
                  data-target="#example-navbar-collapse">
              <span class="sr-only">切换导航</span>
              <span class="icon-bar top-bar"></span>
              <span class="icon-bar bottom-bar"></span>
              <span class="icon-bar"></span>
          </button> -->

          <img class="menu-switch" src="./images/index-menu.png" alt="..." />
          <!-- <a class="navbar-brand" href="#">菜鸟教程</a> -->
        </div>

        <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
          <img class="closeNav" src="./images/mobile-phone-close.png" alt="..." />
            <ul class="nav navbar-nav navbar-right ">
              <li class="active"><a href="./index.html">首页</a></li>
              <li><a href="./childStar/childNews.html">新闻资讯</a></li>
              <li >
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">童星学院 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="college/brand.html">品牌介绍</a></li>
                  <li><a href="college/team.html">公司团队</a></li>
                  <li><a href="college/join.html">机构加盟</a></li>
                  <li><a href="college/cooperation.html">商务合作</a></li>
                  <li><a href="college/contactUs.html">联系我们</a></li>
                </ul>
              </li>
              <li><a href="./childStar/childStar.html">童星通告</a></li>
              <li><a href="./star/star.html">童星库</a></li>
              <li><a href="./childStar/childStarInfo.html">我的</a></li>
              <li class="search">
                <img class="search_icon" src="./images/search.png" alt="...">
              </li>
              <li class="reg_login">
                <div class="reg_login"  aria-label="...">
                  <!-- <button type="button" class="btn btn-default login">登录</button> -->
                  <a class="login" target="_blank" href="./login.html">登录</a>
                </div>
              </li>
              <li class="reg_login">
                <div class="reg_login"  aria-label="...">
                  <!-- <button type="button" class="btn btn-default regist">注册</button> -->
                  <a class="regist" target="_blank"  href="./register.html">注册</a>
                </div>
              </li>
            </ul>

            <div class="search_warp">
              <input type="text" />
              <span class="search_commit">搜索</span>
            </div>
          </div>
        </div>
     </nav>
      <!--swiper-->
      <div class="swiper-container swiper-banner index-banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="swiper-bg" style="background-image: url(./images/banner01.jpg);"></div>
              <div class="swipe-text">
                <div class="swipe-title">
                  专业  ·  用心  ·  诚信
                  <!-- <ul>
                    <li>专业  ·  用心  ·  诚信</li>
                    <li></li>
                    <li></li>
                  </ul> -->
                </div>
                <div class="swipe-title-line"></div>
                <div class="swipe-title-desc">给孩子<br/>更好的未来</div>
                <a href="" class="swipe-more">+MORE</a>
              </div>
              <div class="swiper_bottom_bg">
                <div class="swiper_bottom">
                  <div class="swiper_left">
                    <img src="./images/index_ban_icon.png" alt="...">
                    <div>
                      <h6>横店影视城进军少儿影视产业 横店童星学院正式推出</h6>
                      <p>经过近8个月时间的整合与筹备，2018年3月，由横店影视城全力打造的横店“童星学院”强势推出。</p>
                    </div>
                  </div>
                  <div class="swiper_right">
                    <a href="">更多 ></a>
                  </div>
                </div>
              </div><!--swiper_bottom_bg-->
            </div><!---->
            <div class="swiper-slide">
              <div class="swiper-bg" style="background-image: url(./images/banner02.jpg);"></div>
               <div class="swipe-text">
                <div class="swipe-title">
                  专业  ·  用心  ·  诚信
                  <!-- <ul>
                    <li>专业  ·  用心  ·  诚信</li>
                    <li></li>
                    <li></li>
                  </ul> -->
                </div>
                <div class="swipe-title-line"></div>
                <div class="swipe-title-desc">给孩子<br/>更好的未来</div>
                <a href="" class="swipe-more">+MORE</a>
              </div>
              <div class="swiper_bottom_bg">
                <div class="swiper_bottom">
                  <div class="swiper_left">
                    <img src="./images/index_ban_icon.png" alt="...">
                    <div>
                      <h6>2横店影视城进军少儿影视产业 横店童星学院正式推出</h6>
                      <p>经过近8个月时间的整合与筹备，2018年3月，由横店影视城全力打造的横店“童星学院”强势推出。</p>
                    </div>
                  </div>
                  <div class="swiper_right">
                    <a href="">更多 ></a>
                  </div>
                </div>
              </div><!--swiper_bottom_bg-->
            </div>
            <div class="swiper-slide">
              <div class="swiper-bg" style="background-image: url(./images/banner03.jpg);"></div>
               <div class="swipe-text">
                <div class="swipe-title">
                  专业  ·  用心  ·  诚信
                  <!-- <ul>
                    <li>专业  ·  用心  ·  诚信</li>
                    <li></li>
                    <li></li>
                  </ul> -->
                </div>
                <div class="swipe-title-line"></div>
                <div class="swipe-title-desc">给孩子<br/>更好的未来</div>
                <a href="" class="swipe-more">+MORE</a>
              </div>
              <div class="swiper_bottom_bg">
                <div class="swiper_bottom">
                  <div class="swiper_left">
                    <img src="./images/index_ban_icon.png" alt="...">
                    <div>
                      <h6>3横店影视城进军少儿影视产业 横店童星学院正式推出</h6>
                      <p>经过近8个月时间的整合与筹备，2018年3月，由横店影视城全力打造的横店“童星学院”强势推出。</p>
                    </div>
                  </div>
                  <div class="swiper_right">
                    <a href="">更多 ></a>
                  </div>
                </div>
              </div><!--swiper_bottom_bg-->
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="banner-swiper-pagination swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev swiper-button-white" style="outline: none ;"></div>
        <div class="swiper-button-next swiper-button-white" style="outline: none ;"></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    <!--swiper-->

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron college">
      <div class="container ">
        <h3 class="title line center">童星学院</h3>
        <p class="subtitle center">ABOUT US</p>
        <!-- <span class="title_line"></span> -->
        <p class="txt">横店童星学院是横店影视城少儿影视链的核心品牌，以强大的横店影视城产业资源，专业的影视表演学院加持，致力于打造中国高端少儿
艺术教育顶尖品牌。依托横店影视城独有的、强大的影视资源，构建会员系统平台，打通艺术培训机构、影视剧组、有才艺的儿童之间的
通道，缔造多元化少儿产业链，从而推动国内少儿产业的良性发展。</p>

        <div class="college_list">
          <div class="col-md-4 show_ele">
            <img src="./images/index_icon_01.jpg">
            <h4>品牌介绍</h4>
            <p class="txt">横店童星学院是横店影视城全力打造的
少儿产业链当中的核心品牌</p>
          </div>
          <div class="col-md-4  show_ele">
            <img src="./images/index_icon_02.jpg">
            <h4>机构加盟</h4>
            <p class="txt">改变机构单一培训体系，延长
机构现有的培训产业链</p>
         </div>
          <div class="col-md-4  show_ele">
            <img src="./images/index_icon_03.jpg">
            <h4>商务合作</h4>
            <p class="txt">品牌加持、师资培训
课件提供、后期输出</p>
          </div>
        </div>

      </div>

      <!--画廊-->
      <div id="certify">
        <div class="swiper-list swiper-container">
          <div class="swiper-wrapper">
             <div class="swiper-slide">
                <div class="bgColor">1
                  <div class="bgColor_bg"></div>
                </div>
              
                <img class="img_draw" src="./images/index-college/index-college-01.jpg" alt="...">
              
              <p  class="bgFont">缔造多元化少儿产业链</p>
            </div>
             <div class="swiper-slide">
                <div class="bgColor">2</div>
              
                <img class="img_draw" src="./images/index-college/index-college-02.jpg" alt="...">
              
              <p  class="bgFont">缔造多元化少儿产业链</p>
            </div>
            <div class="swiper-slide">
                <div class="bgColor">3</div>
              
                <img class="img_draw" src="./images/index-college/index-college-03.jpg" alt="...">
              
              <p  class="bgFont">缔造多元化少儿产业链</p>
            </div>
            <div class="swiper-slide">
            	  <div class="bgColor">4</div>
              
                <img class="img_draw" src="./images/index-college/index-college-04.jpg" alt="...">
              
              <p  class="bgFont">缔造多元化少儿产业链</p>
            </div>
            <div class="swiper-slide">
            	  <div class="bgColor">5</div>
              
                <img class="img_draw" src="./images/index-college/index-college-05.jpg" alt="...">
              
                <p class="bgFont">缔造多元化少儿产业链</p>
            </div>
            
          </div>
          <!-- 如果需要分页器 -->
          <!-- <div class="swiper-pagination swiper-pagination-gallery"></div> -->

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>

      <!--画廊-->
    </div>

    <!-- 童星库 -->
    <div class="jumbotron imgList">
      <div class="container library">
        <h3 class="title line center">童星库</h3>
        <p class="subtitle center">Child star library</p>
        <div class="list">

            <div class="panel panel-default">
              <a href="./star/details.html"><img src="./images/ind_02.jpg"></a>
              <div class="txt_content">
                <h6 class="name">林诗童</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="./images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="./star/details.html"><img src="./images/ind_02.jpg"></a>
              <div class="txt_content">
                <h6 class="name">林诗童</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="./images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="./star/details.html"><img src="./images/ind_02.jpg"></a>
              <div class="txt_content">
                <h6 class="name">林诗童</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="./images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="./star/details.html"><img src="./images/ind_02.jpg"></a>
              <div class="txt_content">
                <h6 class="name">林诗童</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="./images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="./star/details.html"><img src="./images/ind_02.jpg"></a>
              <div class="txt_content">
                <h6 class="name">林诗童</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="./images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

        </div>

        <div class="see_all"><a href="./star/star.html">查看全部</a></div>

      </div> <!-- /container -->
    </div>

    <!-- 童星通告-->
    <div class="container inform_tab">
      <div class="row">
        <div class="col-md-6 ele_flex">
          <div class="title_info_p">
            <img class="logo" src="./images/laba.png" alt="...">
            <div class="title_info">
              <h3 class="title">童星通告</h3>
              <p class="subtitle">ABOUT US</p>
            </div>
          </div>

          <div class="title_info_m">
            <h3 class="title line center">童星通告</h3>
            <p class="subtitle center">ABOUT US</p>
          </div>

        </div>
        <div class="col-md-6 ele_flex" >
          <div class="tab_name current activity">活动通告</div>
          <div class="tab_name match">赛事通告</div>
          <div class="tab_name organization">剧组通告</div>
          <div class="tab_name examination ">考级通告</div>
       </div>
      </div>

    </div>
    <!-- 童星通告 -->

    <div class="container panel_list">

      <div class="activity showElement notice">
        <div class="row ">
          <div class="col-md-6 ">
            <div class="panel ele_flex"> <!--面板-->
              <div class="left_img"><img src="./images/inform_02.jpg"></div>
              <div class="right_info">
                <span class="panel_title">亚洲绿色小天使活动</span>
                <p class="panel_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、
  交易于一体的国家级影视产业实验区。</p>
                <div class="panel_info">
                  <span class="time_address">
                    <span class="time"><img src="./images/icon_time.jpg">2018-8-13</span>
                    <span class="address"><img src="./images/icon_address.jpg">北京 北京市</span>
                  </span>
                  <span class="panel_join">报名</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
             <div class="panel ele_flex"> <!--面板-->
              <div class="left_img"><img src="./images/inform_03.jpg"></div>
              <div class="right_info">
                <span class="panel_title">亚洲绿色小天使活动</span>
                <p class="panel_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、
  交易于一体的国家级影视产业实验区。</p>
                <div class="panel_info">
                  <span class="time_address">
                    <span class="time"><img src="./images/icon_time.jpg">2018-8-13</span>
                    <span class="address"><img src="./images/icon_address.jpg">北京 北京市</span>
                  </span>
                  <span class="panel_join">报名</span>
                </div>
              </div>
            </div>
          </div>

        </div><!--row-->

        <div class="row">
          <div class="col-md-6 ">
            <div class="panel ele_flex"> <!--面板-->
              <div class="left_img"><img src="./images/inform_04.jpg"></div>
              <div class="right_info">
                <span class="panel_title">亚洲绿色小天使活动</span>
                <p class="panel_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、
  交易于一体的国家级影视产业实验区。</p>
                <div class="panel_info">
                  <span class="time_address">
                    <span class="time"><img src="./images/icon_time.jpg">2018-8-13</span>
                    <span class="address"><img src="./images/icon_address.jpg">北京 北京市</span>
                  </span>
                  <span class="panel_join">报名</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
             <div class="panel ele_flex"> <!--面板-->
              <div class="left_img"><img src="./images/inform_05.jpg"></div>
              <div class="right_info">
                <span class="panel_title">亚洲绿色小天使活动</span>
                <p class="panel_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、
  交易于一体的国家级影视产业实验区。</p>
                <div class="panel_info">
                  <span class="time_address">
                    <span class="time"><img src="./images/icon_time.jpg">2018-8-13</span>
                    <span class="address"><img src="./images/icon_address.jpg">北京 北京市</span>
                  </span>
                  <span class="panel_join">报名</span>
                </div>
              </div>
            </div>
          </div>

        </div><!--row-->

        <div class="row">
          <div class="col-md-6 ">
            <div class="panel ele_flex"> <!--面板-->
              <div class="left_img"><img src="./images/inform_06.jpg"></div>
              <div class="right_info">
                <span class="panel_title">亚洲绿色小天使活动</span>
                <p class="panel_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、
  交易于一体的国家级影视产业实验区。</p>
                <div class="panel_info">
                  <span class="time_address">
                    <span class="time"><img src="./images/icon_time.jpg">2018-8-13</span>
                    <span class="address"><img src="./images/icon_address.jpg">北京 北京市</span>
                  </span>
                  <span class="panel_join">报名</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
          </div>

        </div><!--row-->
        <div class="see_all">
          <a  href="./childStar/childStar.html" >查看全部</a>
        </div>
        
      </div><!--活动通告-->

      <!--赛事通告-->
      <div class="match notice">
        <div class="row ">
          <div class="col-md-6 ">
            <div class="panel ele_flex"> <!--面板-->
              <div class="left_img"><img src="./images/inform_02.jpg"></div>
              <div class="right_info">
                <span class="panel_title">亚洲绿色小天使活动</span>
                <p class="panel_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、
  交易于一体的国家级影视产业实验区。</p>
                <div class="panel_info">
                  <span class="time_address">
                    <span class="time"><img src="./images/icon_time.jpg">2018-8-13</span>
                    <span class="address"><img src="./images/icon_address.jpg">北京 北京市</span>
                  </span>
                  <span class="panel_join">报名</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
             <div class="panel ele_flex"> <!--面板-->
              <div class="left_img"><img src="./images/inform_02.jpg"></div>
              <div class="right_info">
                <span class="panel_title">亚洲绿色小天使活动</span>
                <p class="panel_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、
  交易于一体的国家级影视产业实验区。</p>
                <div class="panel_info">
                  <span class="time_address">
                    <span class="time"><img src="./images/icon_time.jpg">2018-8-13</span>
                    <span class="address"><img src="./images/icon_address.jpg">北京 北京市</span>
                  </span>
                  <span class="panel_join">报名</span>
                </div>
              </div>
            </div>
          </div>

        </div><!--row-->

        <div class="row">
          <div class="col-md-6 ">
            <div class="panel ele_flex"> <!--面板-->
              <div class="left_img"><img src="./images/inform_02.jpg"></div>
              <div class="right_info">
                <span class="panel_title">亚洲绿色小天使活动</span>
                <p class="panel_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、
  交易于一体的国家级影视产业实验区。</p>
                <div class="panel_info">
                  <span class="time_address">
                    <span class="time"><img src="./images/icon_time.jpg">2018-8-13</span>
                    <span class="address"><img src="./images/icon_address.jpg">北京 北京市</span>
                  </span>
                  <span class="panel_join">报名</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
             <div class="panel ele_flex"> <!--面板-->
              <div class="left_img"><img src="./images/inform_02.jpg"></div>
              <div class="right_info">
                <span class="panel_title">亚洲绿色小天使活动</span>
                <p class="panel_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、
  交易于一体的国家级影视产业实验区。</p>
                <div class="panel_info">
                  <span class="time_address">
                    <span class="time"><img src="./images/icon_time.jpg">2018-8-13</span>
                    <span class="address"><img src="./images/icon_address.jpg">北京 北京市</span>
                  </span>
                  <span class="panel_join">报名</span>
                </div>
              </div>
            </div>
          </div>

        </div><!--row-->

        <div class="row">
          <div class="col-md-6 ">
            <div class="panel ele_flex"> <!--面板-->
              <div class="left_img"><img src="./images/inform_02.jpg"></div>
              <div class="right_info">
                <span class="panel_title">亚洲绿色小天使活动</span>
                <p class="panel_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、
  交易于一体的国家级影视产业实验区。</p>
                <div class="panel_info">
                  <span class="time_address">
                    <span class="time"><img src="./images/icon_time.jpg">2018-8-13</span>
                    <span class="address"><img src="./images/icon_address.jpg">北京 北京市</span>
                  </span>
                  <span class="panel_join">报名</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
             <div class="panel ele_flex"> <!--面板-->
              <div class="left_img"><img src="./images/inform_02.jpg"></div>
              <div class="right_info">
                <span class="panel_title">亚洲绿色小天使活动</span>
                <p class="panel_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、
  交易于一体的国家级影视产业实验区。</p>
                <div class="panel_info">
                  <span class="time_address">
                    <span class="time"><img src="./images/icon_time.jpg">2018-8-13</span>
                    <span class="address"><img src="./images/icon_address.jpg">北京 北京市</span>
                  </span>
                  <span class="panel_join">报名</span>
                </div>
              </div>
            </div>
          </div>

        </div><!--row-->
        <a class="see_all" href="" >查看全部</a>
      </div><!--赛事通告-->

      <!--剧组通告-->
      <div class="organization">
        <div class="row">
          <div class="col-md-6 ">
            <div class="panel panel_orga"> <!--面板-->
              <span class="panel_orga_title"><i>剧组</i>好莱坞大片招募颜值高的小女孩</span>
              <p class="panel_orga_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、交易于一体的国家级影视产业实验区。
得益于中国影视产业的迅猛发展，横店已发展成为中国“规模最宏大、要素最集聚、技术最先进……</p>
              <div class="panel_user">
                <span class="panel_user_people"><img src="./images/icon_people.jpg">3人</span>
                <span class="panel_user_time"><img src="./images/icon_time.jpg">2018-8-13</span>
                <span class="panel_user_address"><img src="./images/icon_address.jpg">北京 北京市</span>
                <span class="panel_user_join">报名</span>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="panel panel_orga"> <!--面板-->
              <span class="panel_orga_title"><i>剧组</i>好莱坞大片招募颜值高的小女孩</span>
              <p class="panel_orga_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、交易于一体的国家级影视产业实验区。
得益于中国影视产业的迅猛发展，横店已发展成为中国“规模最宏大、要素最集聚、技术最先进……</p>
              <div class="panel_user">
                <span class="panel_user_people"><img src="./images/icon_people.jpg">3人</span>
                <span class="panel_user_time"><img src="./images/icon_time.jpg">2018-8-13</span>
                <span class="panel_user_address"><img src="./images/icon_address.jpg">北京 北京市</span>
                <span class="panel_user_join">报名</span>
              </div>
            </div>
          </div>
        </div><!--row-->
        <a class="see_all" href="" >查看全部</a>
      </div><!--剧组通告-->

      <!--考级通告-->
      <div class="examination">
        <div class="row">
          <div class="col-md-6 ">
            <div class="panel panel_orga"> <!--面板-->
              <span class="panel_orga_title"><i>剧组</i>好莱坞大片招募颜值高的小女孩</span>
              <p class="panel_orga_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、交易于一体的国家级影视产业实验区。
得益于中国影视产业的迅猛发展，横店已发展成为中国“规模最宏大、要素最集聚、技术最先进……</p>
              <div class="panel_user">
                <span class="panel_user_people"><img src="./images/icon_people.jpg">3人</span>
                <span class="panel_user_time"><img src="./images/icon_time.jpg">2018-8-13</span>
                <span class="panel_user_address"><img src="./images/icon_address.jpg">北京 北京市</span>
                <span class="panel_user_join">报名</span>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="panel panel_orga"> <!--面板-->
              <span class="panel_orga_title"><i>剧组</i>好莱坞大片招募颜值高的小女孩</span>
              <p class="panel_orga_txt">横店影视产业实验区是全国首个集影视创作、拍摄、制作、发行、交易于一体的国家级影视产业实验区。
得益于中国影视产业的迅猛发展，横店已发展成为中国“规模最宏大、要素最集聚、技术最先进……</p>
              <div class="panel_user">
                <span class="panel_user_people"><img src="./images/icon_people.jpg">3人</span>
                <span class="panel_user_time"><img src="./images/icon_time.jpg">2018-8-13</span>
                <span class="panel_user_address"><img src="./images/icon_address.jpg">北京 北京市</span>
                <span class="panel_user_join">报名</span>
              </div>
            </div>
          </div>
        </div><!--row-->
        <a class="see_all" href="" >查看全部</a>
      </div><!--考级通告-->

    </div> <!-- /container -->
    <!--end -->

    <footer class="foot">
      <div class="container">
        <div class="row">
          <div class="col-md-6 wxCode">
            <div class="wxWrap">
              <div class="pub">
                <img class="wx_01" src="./images/wx_01.jpg">
                <p>微信公众号</p>
              </div>
              <div class="sma">
                <img src="./images/wx_02.jpg">
                <p>小程序</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 info" >
            <p>童星学院  |  版权声明  |  隐私保障  |  商业合作  |  加入我们  |  联系方式</p>
            <p>咨询热线：0579-8690 8770</p>
            <p>地址：浙江省金华市东阳市横店明清宫苑内</p>
            <p>Copyright ＠东阳市横店影视城微电影有限公司, All Rights Reserved   浙ICP备00000000号-1</p>
          </div>
        </div>
      </div>

    </footer>
    <script src="./js/jquery.min.js"></script>
    <script src="./lib/swiper/swiper.min.js"></script>
    <script src="./js/bootstrap.js"></script>
  </body>
</html>
<script>
  $(function() {

    var page = $('.page');
    var item = page.find('.inform_tab');
    var panel = page.find('.panel_list');
    var searchWarp = page.find('.search_warp');

    //进入页面动态设置swiper的宽高
    var swiperBg = page.find('.swiper-bg');
    var width = $(window).width();
    swiperBg.css({
      'width': width,
      'height': width/2
    })
    window.onload = function() {
      swiper();
    }
    window.onresize = function() {
      width = $(window).width();
      swiperBg.css({
        'width': width,
        'height': width/2
      })

      swiper();
    }
    $('.closeNav').on('click',function(){
      $('#example-navbar-collapse').find('.navbar-nav').hide();
      $(this).hide();
    })

    $('.menu-switch').on('click',function(){
      $('#example-navbar-collapse').show();
      $('#example-navbar-collapse').find('.navbar-nav').show();
      $('.closeNav').show();
    })

    

    item.find('.examination').on('click',function(){

      if(!$(this).hasClass('current')){
        $(this).addClass('current')
      }
      $(this).siblings().removeClass('current');
      changeShow(panel,'.examination')
    })

    item.find('.organization').on('click',function(){
      if(!$(this).hasClass('current')){
        $(this).addClass('current')
      }
      $(this).siblings().removeClass('current');
      changeShow(panel,'.organization')
    })

    item.find('.match').on('click',function(){
      if(!$(this).hasClass('current')){
        $(this).addClass('current')
      }
      $(this).siblings().removeClass('current');
      changeShow(panel,'.match')
    })

    item.find('.activity').on('click',function(){
      if(!$(this).hasClass('current')){
        $(this).addClass('current')
      }
      $(this).siblings().removeClass('current');
      changeShow(panel,'.activity')
    })

    //点赞
    agreeIt()

    //search
    $('.search_icon').on('click',function(){
      // alert('33');
      searchWarp.show();
    });
    
    //搜索铵钮
     $('.search_warp').find('.search_commit').on('click',function(){
     
       if(searchWarp.find('input').val() == ''){
         alert('搜索值不能为空');
         return false;
       }
       searchWarp.hide();
     });

  });
  function agreeIt(){
    var page =$('.page')
    page.find('.imgList .agree_icon').on('click',function(){
      $(this).attr('src','./images/icon_stick.png')
    })
  }

  function swiper() {

    var page =$('.page');
    var certify = page.find('#certify');
    var bgList = certify.find('.bgColor');
    
    if($(window).width()< 1024){
      certify.find('.swiper-container').css({
        'height':($(window).width()/certify.find('.swiper-slide').length) * 1.4 * 2
      })

      certify.find('.bgColor').css({
        'height':$(window).width()/certify.find('.swiper-slide').length
      })

      certify.find('p').css({
        'transform':'scale(0.7)'
        // 'margin-top':($(window).width()/certify.find('.swiper-slide').length) * 1.4 - $(window).width()/certify.find('.swiper-slide').length - 60
      })
    }


    if($(window).width() > 1024){
      certify.find('.swiper-container').css({
        'height':($(window).width()/certify.find('.swiper-slide').length) * 1.4 + 40
      })

      certify.find('.bgColor').css({
        'height':$(window).width()/certify.find('.swiper-slide').length
      })
      console.log(certify.find('p').css('fontSize'))
      certify.find('p').css({
        'transform':'scale(0.7)'
        // 'margin-top':($(window).width()/certify.find('.swiper-slide').length) * 1.4 - $(window).width()/certify.find('.swiper-slide').length - 60
      })
    }
    
    
    // bgList.forEach(function(item,index){
    //   $(this).html()
    // });
     

    var mySwiper = new Swiper('.swiper-banner', {
      speed:1000,
      direction: 'horizontal', // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: true,//可选选项，自动滑动
      slidesPerView: 'auto',
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable :true,
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.index-banner .swiper-button-next',
        prevEl: '.index-banner .swiper-button-prev',
      },

      // 如果需要滚动条
      // scrollbar: {
      //   el: '.swiper-scrollbar',
      //   hide: true,
      // },
    }) ;
    var mySwiperList = new Swiper('.swiper-list', {
      speed:600,
      watchSlidesProgress: true,
      slidesPerView: 'auto',
      centeredSlides: true,
      loop: true,
      initialSlide :3,
      slidesPerView:($(window).width() > 1023 ? 5 : 3),
      loopedSlides: 5,
      // autoplay: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination-gallery',
        clickable :true,
      },
      on: {
        init: function(){
           
          // for(var i = 0; i< bgList.length;i++){
          //   console.log(certify.find('.swiper-slide').width());
             
          //   $(bgList[i]).css({
          //     height: certify.find('.swiper-slide').width()
          //   });
          // }
          
          //Swiper初始化了
          // console.log(this);
          // this.emit('transitionEnd');//在初始化时触发一次transitionEnd事件
        
          // this.slides[this.activeIndex].style.height='400px';
          // this.slides[this.activeIndex].style.width='400px';
          // this.updateSize();
        }, 
        slideChange: function(e){
          // for(var i = 0; i< bgList.length;i++){
          //   console.log(certify.find('.swiper-slide').width());
             
          //   $(bgList[i]).css({
          //     height: certify.find('.swiper-slide').width()
          //   });
          // }
          //  this.slides[this.activeIndex].style.height='400px';
          // this.slides[this.activeIndex].style.width='400px';
          // this.updateSize();
          // console.log(this.activeIndex);
        },
        progress: function(progress) {
          // console.log(progress);
          // mySwiper.slides[0].style.height='800px';
          // mySwiper.updateSize();
          // for (i = 0; i < this.slides.length; i++) {
          //   var slide = this.slides.eq(i);
          //   var slideProgress = this.slides[i].progress;
          //   modify = 1;
          //   if (Math.abs(slideProgress) > 1) {
          //     modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
          //   }
          //   translate = slideProgress * modify * 260 + 'px';
          //   scale = 1 - Math.abs(slideProgress) / 5;
          //   zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
          //   slide.transform('translateX(' + translate + ') scale(' + scale + ')');
          //   slide.css('zIndex', zIndex);
          //   slide.css('opacity', 1);
          //   if (Math.abs(slideProgress) > 3) {
          //     slide.css('opacity', 0);
          //   }
          // }

        },
        setTransition: function(transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i)
            slide.transition(transition);
          }

        }
      }
    })

  }

  function changeShow(panel,name){
    console.log(panel.find(name));
    panel.find(name).addClass('showElement');

    console.log(panel.find(name).attr('class'));
    panel.find(name).siblings().removeClass('showElement');
  }

</script>
